<template>
  <div class="equip-overview">
    <div class="equip-overview-top">
      <component :is="components[iconName]"></component>
      <span class="title">{{ data.name }} </span>
      <div class="detail" @click="toDetail(data)">
        <span>查看详情</span>
        <el-icon size="22"><DArrowRight /></el-icon>
      </div>
    </div>
    <div class="equip-overview-center" :column="3">
      <el-descriptions size="small">
        <el-descriptions-item label="运行状态" v-if="iconName !== 'switchboard'">
          {{ statusList[data.status] ? statusList[data.status].name : "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="管理IP地址" :span="iconName !== 'switchboard' ? 2 : 3">
          {{ data.ip || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="告警状态" :span="3">
          <div style="display: inline-flex; column-gap: 12px">
            <div v-for="(item, key) in alarmStatus" :key="key">
              {{ item.name }}
              <span :style="{ color: item.color }">{{ data.alarms && data.alarms[key] ? data.alarms[key] : 0 }}</span>
              条
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="资产编号" :span="3" v-if="iconName === 'server'">
          {{ data.asset_number || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="热备盘容量" v-if="iconName === 'storage'">
          {{ data.monitor && data.monitor["hotDiskCapacity"] ? data.monitor["hotDiskCapacity"] : 0 }} GB
        </el-descriptions-item>
        <el-descriptions-item label="已使用容量" v-if="iconName === 'storage'">
          {{ data.monitor && data.monitor["usedCapacity"] ? data.monitor["usedCapacity"] : 0 }} GB
        </el-descriptions-item>
        <el-descriptions-item label="总容量" v-if="iconName === 'storage'">
          {{ data.monitor && data.monitor["totalCapacity"] ? data.monitor["totalCapacity"] : 0 }} GB
        </el-descriptions-item>
        <el-descriptions-item label="响应时间" v-if="iconName === 'switchboard'">
          {{ data.monitor && data.monitor["responseTime"] ? data.monitor["responseTime"] : 0 }} ms
        </el-descriptions-item>
        <el-descriptions-item label="平均CPU利用率" v-if="iconName === 'switchboard'">
          {{ data.monitor && data.monitor["cpuUsage"] ? data.monitor["cpuUsage"] : 0 }} %
        </el-descriptions-item>
        <el-descriptions-item label="平均内存利用率" v-if="iconName === 'switchboard'">
          {{ data.monitor && data.monitor["memoryUsage"] ? data.monitor["memoryUsage"] : 0 }} %
        </el-descriptions-item>
      </el-descriptions>
      <!-- 服务器：CPU、内存、磁盘使用率（总量、已用） -->
      <!-- 存储：热备盘容量、已使用容量、总容量 -->
      <!-- 交换机：响应时间、平均CPU利用率、平均内存利用率 -->
      <div class="center-bottom" v-if="iconName === 'server'">
        <div class="center-bottom-A" v-for="item in serverRateList" :key="item.key">
          <div class="item-left-A">
            <span>{{ item.name }}</span>
          </div>
          <!-- <el-progress
            type="circle"
            :percentage="data.monitor && data.monitor[item.key] ? data.monitor[item.key] : 0"
            :color="'rgba(107, 156, 255, 1)'"
            :stroke-width="10"
            width="55"
          ></el-progress> -->
          <el-progress
            type="circle"
            :percentage="55"
            :color="'rgba(107, 156, 255, 1)'"
            :stroke-width="10"
            :width="55"
          ></el-progress>
          <div class="name">使用率</div>
        </div>
      </div>
    </div>
    <div class="equip-overview-bottom" v-if="data.cloud_vm && data.cloud_vm.length">
      <div class="bottom-A">
        <span class="bottom-A-title">云主机</span>
        <NumLabel
          v-for="(item, key) in hostStatusList"
          :key="key"
          :name="item.name"
          :num="item.count"
          :unit="'台'"
          :color="item.color"
        ></NumLabel>
      </div>
      <div class="bottom-B">
        <div v-for="(item, i) in data.cloud_vm" :key="i + 'host'" class="bottom-B-item" @click="toDetail(item)">
          <div
            class="label-icon"
            :style="{
              background: hostStatusList[item.status] ? hostStatusList[item.status].color : hostStatusList['unknown'].color
            }"
          ></div>
          <div class="label-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, defineAsyncComponent, watch, onMounted } from "vue";
import NumLabel from "./NumLabel.vue";
import { ElMessage } from "element-plus";
const baseColor = reactive([
  "rgba(107, 156, 255, 1)",
  "#0CB30C",
  "rgba(166, 166, 166, 1)",
  "rgba(255, 195, 0, 1)",
  "rgba(232, 5, 5, 1)",
  "rgba(213, 232, 10, 1)"
]);
const components = {
  secure: defineAsyncComponent(() => import("../icon/icon_secure.vue")),
  storage: defineAsyncComponent(() => import("../icon/icon_storage.vue")),
  server: defineAsyncComponent(() => import("../icon/icon_server.vue")),
  switchboard: defineAsyncComponent(() => import("../icon/icon_switchboard.vue")),
  others: defineAsyncComponent(() => import("../icon/icon_others.vue"))
};

const props = defineProps({
  data: {
    type: Object,
    require: true,
    default: () => ({})
  },
  iconName: {
    type: String,
    require: false,
    default: () => "others"
  },
  status: {
    type: Object,
    require: false,
    default: () => ({})
  },
  statusList: {
    type: Object,
    require: false,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
});
const serverRateList = reactive([
  {
    key: "cpuUsage",
    name: "CPU"
  },
  {
    key: "memoryUsage",
    name: "内存"
  },
  {
    key: "diskUsage",
    name: "磁盘"
  }
]);
const hostStatusList = reactive({
  all: { name: "总数", color: baseColor[0], count: 0 },
  normal: { name: "运行中", color: baseColor[1], count: 0 },
  offline: { name: "关机", color: baseColor[2], count: 0 },
  unknown: { name: "其他", color: baseColor[3], count: 0 }, // 没找到的都是其他
  error: { name: "错误", color: baseColor[4], count: 0 }
});
const alarmStatus = reactive({
  critical: { name: "紧急", color: baseColor[4] },
  error: { name: "重要", color: baseColor[3] },
  warning: { name: "警告", color: baseColor[5] },
  info: { name: "提示", color: baseColor[0] }
});

watch(
  () => props.data.cloud_vm,
  () => {
    getStatusNum();
  }
);

// const img = item => {
//   return require("../img/" + item.key + ".png");
// };

// const total = item => {
//   return (item.use || 0) + (item.noUse || 0);
// };

// const percent = item => {
//   const num = total(item);
//   return num ? Number(Math.round(((item.use || 0) / num) * 100)) : 0;
// };

const getStatusNum = () => {
  const list = props.data.cloud_vm || [];
  const keyList = ["normal", "offline", "error"];
  let total = 0;
  keyList.forEach(item => {
    const data = list.filter(a => a.status === item) || [];
    hostStatusList[item].count = data.length;
    total += data.length;
  });
  hostStatusList["all"].count = list.length;
  hostStatusList["unknown"].count = list.length - total;
};

const toDetail = data => {
  if (!data.id && !data.ip) {
    ElMessage.warning("未获取到详情数据，无法跳转！");
    return;
  }
  const params = {
    resource_type_id: data.resource_type_id,
    name: data.name,
    ip: data.ip,
    resource_type_key: data.resource_type_key,
    id: data.id
  };
  localStorage.setItem("assetParams", JSON.stringify(params));
  if (props.iconName === "switchboard") {
    window.location.href = `/cloud_integration_sys/monitor_management/#/net_monitor`;
  } else {
    window.location.href = `/cloud_integration_sys/monitor_management/#/cloud_monitor`;
  }
};

onMounted(() => {
  getStatusNum();
});
</script>
<style lang="scss" scoped>
.equip-overview {
  // min-height: 270px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: 576px;
  .equip-overview-top {
    display: flex;
    align-items: center;
    height: 30px;
    svg {
      width: 24px;
      height: 24px;
      padding: 0 4px;
    }
    .title {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .detail {
      display: flex;

      // column-gap: 13px;
      align-items: center;
      height: 100%;
      cursor: pointer;
    }
  }
  .equip-overview-center {
    padding: 8px;

    // height: 210px;
    background: var(--el-color-primary-light-6);
    .center-bottom {
      display: flex;
      column-gap: 20px;
      justify-content: space-between;
      padding: 8px;
      .center-bottom-item {
        display: grid;
        grid-template-columns: 65% 1fr;
        width: 240px;
        height: 100px;
        background: var(--el-bg-color2);
        border: 1px solid var(--el-border-color);
        border-radius: 2.51px;
        .item-left {
          display: flex;
          flex-direction: column;
          padding: 8px;
          .item-left-A {
            img {
              width: 24px;
              height: 24px;
              margin-right: 1px;
            }
          }
          .item-left-B {
            flex: 1;
            line-height: 40px;
            text-align: center;
            .num {
              font-size: 20px;
              font-weight: 500;
            }
            .unit {
              font-size: 9px;
            }
          }
          .item-left-C {
            display: grid;
            grid-template-columns: 50% 50%;
          }
        }
        .item-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .name {
            font-size: 12px;
            color: var(--el-header-logo-text-color);
          }
        }
      }
      .center-bottom-A {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 100px;
        padding: 0 10px;
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color);
        border-radius: 2.51px;
        .item-left-A {
          width: 100%;
        }
        .name {
          font-size: 12px;
          color: var(--el-header-logo-text-color);
        }
      }
    }
    :deep().el-descriptions-row {
      display: flex;
      justify-content: space-between;
    }
    :deep().el-descriptions-item {
      display: flex;
      min-width: 100px;
    }
    :deep().el-descriptions-item-label {
      white-space: nowrap;
    }
    :deep().el-descriptions-item-content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .equip-overview-bottom {
    .bottom-A {
      display: flex;
      column-gap: 16px;
      padding: 6px;
      background: var(--el-color-primary-light-6);
      border-radius: 3px;
      .bottom-A-title {
        color: var(--el-header-logo-text-color);
      }
    }
    .bottom-B {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px 12px;
      max-height: 400px;
      padding: 8px;
      margin-top: 8px;
      overflow: auto;
      .bottom-B-item {
        display: grid;
        grid-template-columns: 24px 1fr;
        align-items: center;
        height: 32px;
        padding-left: 30px;
        cursor: pointer;
        background: var(--el-color-primary-light-4);
        border-radius: 3px;
        box-shadow: 0 0 2px var(--el-icon-color);
        .label-icon {
          width: 8px;
          height: 8px;
          border-radius: 8px;
        }
        .label-name {
          overflow: hidden;
          font-size: 14px;
          color: var(--el-bg-color);
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
